<template>
    <div class="loader-main-box">
        <div class="loader-box"></div>
    </div>
</template>
<script lang="ts" setup>

import { useRouter, useRoute, useLink } from "vue-router";
import { useAppStore } from '@/store/modules/app';
import { useSettingStore } from '@/store/modules/setting';
import { useUserStore } from '@/store/modules/user';
import { reactive, ref, toRefs, computed, PropType, watch, onMounted,inject } from 'vue';
import useCurrentInstance from "@/common/useCurrentInstance";
const { proxy } = useCurrentInstance();
const {currentMenu} = proxy.$api.account;


const settingStore = useSettingStore();
const userStore = useUserStore();
const appStore = useAppStore();
const router = useRouter();
// 刷新
const reload = inject('reload');
onMounted(()=>{
    setTimeout(()=>{
        onLoader();
    },2000)
})

const onLoader = ()=>{
    router.back();
    // currentMenu().then((response: any) => {
    //     let menuList = response.data;
    //     store.dispatch('setMenuList', { menuList: menuList })
    //     router.back();
    //     console.info(router.getRoutes());
    // }).catch((err: any) => {
    //     console.log(err);
    // });
}
</script>
<style scoped lang="scss">
.loader-main-box {
    position: fixed;
    width: 90%;
    height: 90%;
    z-index: 9999999;
    .loader-box {
        width: 80px;
        height: 80px;
        margin: 30px auto 40px;
        margin-top: 12%;
        position: relative;
        z-index: 999999;
    }

    .loader-box:before {
        content: "";
        width: 80px;
        height: 15px;
        border-radius: 50%;
        background: #000;
        opacity: 0.1;
        position: absolute;
        top: 100px;
        left: 0;
        animation: shadow 0.5s linear infinite;
    }

    .loader-box:after {
        content: "";
        width: 80px;
        height: 80px;
        border-radius: 3px;
        background-color: #5fb878;
        position: absolute;
        top: 0;
        left: 0;
        animation: loading 0.5s linear infinite;
    }

}

@-webkit-keyframes loading {
    17% {
        border-bottom-right-radius: 3px;
    }

    25% {
        transform: translateY(9px) rotate(22.5deg);
    }

    50% {
        transform: translateY(18px) scale(1, 0.9) rotate(45deg);
        border-bottom-right-radius: 40px;
    }

    75% {
        transform: translateY(9px) rotate(67.5deg);
    }

    100% {
        transform: translateY(0) rotate(90deg);
    }
}

@keyframes loading {
    17% {
        border-bottom-right-radius: 3px;
    }

    25% {
        transform: translateY(9px) rotate(22.5deg);
    }

    50% {
        transform: translateY(18px) scale(1, 0.9) rotate(45deg);
        border-bottom-right-radius: 40px;
    }

    75% {
        transform: translateY(9px) rotate(67.5deg);
    }

    100% {
        transform: translateY(0) rotate(90deg);
    }
}

@-webkit-keyframes shadow {

    0%,
    100% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.2, 1);
    }
}

@keyframes shadow {

    0%,
    100% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.2, 1);
    }
}
</style>